$(function () {
    // ajax多处都用得到,定义为全局变量
    let q = {
        pagenum: 1,        //是	int	页码值
        pagesize: 2,        //是	int	每页显示多少条数据
        cate_id: "",       //否	string	文章分类的 Id
        state: "",       //否	string	文章的状态，可选值有：已发布、草稿
    }
    // 需求1. 初始化文章列表所有数据
    let layer = layui.layer
    initArticleList()
    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            // GET 类型用params属性,POST类型用data属性
            params: q
        }).then(res => {
            // console.log(res.data.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            // 渲染
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(`
                    <tr>
                        <td>${ele.title}</td>
                        <td>${ele.cate_name}</td>
                        <td>${formatDate(ele.pub_date)}</td>
                        <td>${ele.state}</td>
                        <td>
                            <a href="/article/art_edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">编辑</a>
                            <button data-id="${ele.Id}" class="del-btn layui-btn layui-btn-danger layui-btn-xs">删除</button>
                        </td>
                    </tr>
                `)
            });

            // 循环结束后赋值
            $("tbody").empty().html(arr.join(''))
            // 分页
            renderPage(res.data.total)
        })
    }

    // 需求2.初始化文章分类列表 - 封装函数
    let form = layui.form
    initArtCateList()
    // 封装
    function initArtCateList() {
        axios({
            url: '/my/article/cates'
        }).then(res => {
            // console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            // 成功
            let arr = ['<option value="">请选择文章所属分类</option>']
            res.data.data.forEach(ele => {
                // console.log(ele);
                arr.push(`
                 <option value="${ele.Id}">${ele.name}</option>
                 `)
            });
            // 循环激素赋值
            let str = arr.join('')
            $("[name=cate_id]").empty().html(str)
            // form.render()可以渲染layui中的 delect/ checkbox/ radio 
            // 本质: 隐藏掉原来的下拉菜单从新生成 dl 下的点dd
            form.render()
        })
    }

    // 需求3. 完成筛选功能
    $("#searchForm").on('submit', function (e) {
        e.preventDefault()
        // cate_id 和 state 的值修改,根据form表单里的值修改
        q.cate_id = $("[name=cate_id]").val()
        q.state = $("[name=state]").val()
        // 重新渲染 文章列表
        initArticleList()
    })

    // 需求4.分页
    var laypage = layui.laypage;

    function renderPage(total) {
        //执行一个laypage实例
        // limit 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
        laypage.render({
            elem: 'pageBox',  //注意，这里的 test1 是 ID，不用加 # 号
            count: total,  //数据总数，从服务端得到
            limit: q.pagesize,  // 每页显示多少条
            curr: q.pagenum,  // 第几页
            layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
            limits: [2, 3, 5, 10],
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数
                if (!first) {
                    //do something 当前页改变重新渲染文章列表
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit
                    initArticleList()
                }
            }
        });
    }

    // 需求5. 删除-事件委托
    $("body").on('click', '.del-btn', function () {
        let id = $(this).attr('data-id')
        //eg1
        layer.confirm('是否确定删除?', { icon: 3, title: '提示' }, function (index) {
            //do something axios
            axios({
                method: "GET",
                // /保留 :删除
                url: '/my/article/delete/' + id
            }).then(res => {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message)
                }
                // 成功,提示,刷新页面
                layer.msg('恭喜您,删除文章成功!')

                // bug 解决: 再次刷新页面之前,判断逻辑 pagenum 是否要减一
                // 发送ajax,删除文章成功,前端依然有这条数据,需要用新数据覆盖
                // 页面中只有一个元素时,收到一个删除成功的响应
                // if ($('.del-btn').length == 1 && q.pagenum > 1) {
                //     q.pagenum--
                // }
                // 优化:短路运算法
                $(".del-btn").length == 1 && q.pagenum > 1 && q.pagenum--

                // 刷新页面
                initArticleList()

            })
            layer.close(index);
        });
    })






})